<template>
    <div class="chatList">
        <div class="top">
            <div class="addChat">建新对话</div>
        </div>
        <div class="list">
            <ul>
                <li class="chatItem" v-for="(item, index) in chatList">
                    <IconEpChatDotSquare />
                    <div class="text">Chat1</div>
                    <IconEpEditPen />
                    <IconEpDelete />
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const chatList = ref([
    {
        id: 1,
        name: 'Chat1'
    },
    {
        id: 2,
        name: 'Chat2'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    }, {
        id: 3,
        name: 'Chat3'
    }, {
        id: 3,
        name: 'Chat3'
    }, {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },

    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
    {
        id: 3,
        name: 'Chat3'
    },
])
</script>

<style scoped lang="scss">
.chatList {
    // padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;

    .addChat {
        text-align: center;
        border: 1px dashed #999;
        border-radius: 4px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        cursor: pointer;
        color: #666;
        margin: 12px;

        &:hover {
            border-color: var(--color-main);
            color: var(--color-main);
        }
    }

    .list {
        margin: 0px 0;
        overflow-y: auto;
        max-height: calc(100vh - 150px);
        padding: 0 10px;

        &::-webkit-scrollbar {
            width: 4px;
            height: 6px;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            background-color: #93c8f4dd;
        }

        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        ul {
            li {
                margin-bottom: 12px;
                border: 1px solid #999;
                height: 45px;
                border-radius: 4px;
                display: flex;
                gap: 5px;
                align-items: center;
                box-sizing: border-box;
                padding: 0 8px;

                .text {
                    flex: 1;
                }
            }
        }
    }

}
</style>
